<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>报事报修</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="assets/css/public.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <style type="text/css">
        .center{
            margin-top:71px;
        }
        .fangchan{
            width: 90%;
            margin-left:5%;
            height:43px;
            box-shadow:1px 1px 10px rgba(253,135,67,0.22);
            -webkit-box-shadow: 1px 1px 10px rgba(253,135,67,0.22);
            -moz-box-shadow: 1px 1px 10px rgba(253,135,67,0.22);
        }
        .fangchan>span{
            float: left;
            margin-left: 3px;
            color: #FD8340;
            font-size: 16px;
            line-height: 43px;
        }
        .fangchan>select{
            width:73%;
            float: right;
            height:27px;
            border: none;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance:none;
            border: 1px solid #ccc;
            margin-top:10px;
            border-radius: 10px;
            text-indent: 16px;
            font-size: 14px;
            color: #999999;
            background: url("assets/i/xia.png")no-repeat;
            background-position: 95%;
            background-size: 15px;
        }
        .info{
            margin-top:20px;
            height:160px;
            width: 90%;
            margin-left: 5%;
            box-shadow:1px 1px 10px rgba(253,135,67,0.22);
            -webkit-box-shadow: 1px 1px 10px rgba(253,135,67,0.22);
            -moz-box-shadow: 1px 1px 10px rgba(253,135,67,0.22);
            text-align: center;
        }
        .info>p{
            margin: 0;
            padding: 0;
            margin-top:14px;
            font-size: 16px;
            color:#FD8340 ;
            float: left;

        }
        .info>textarea{
            width: 87%;
            clear: both;
            margin-top: 10px;
            height:100px;
            border: 1px solid #DBDBDB;
            border-radius: 10px;
            outline:none;
            resize: none;
            text-indent: 12px;
        }
        .btn{
            margin-top: 28px;
        }
        .btn>span{
            width:48%;
            display: block;
            margin-left: 26%;
            height:45px;
            background: linear-gradient(to bottom, #FD8340 , #FD9F52);
            border-radius: 15px;
            color: #fff;
            font-size:15px;
            line-height: 45px;
            text-align: center;
        }
        .record-baoxiu{
            border-bottom: 1px solid #dbdbdb;padding: 8px;font-size: 13px;
            text-align: left;
            margin-top:5px;
        }
        .record-baoxiu:last-child{
            margin-bottom: 15px;
        }
        .record-baoxiu .time{
            float: left;
        }
        .record-baoxiu .duqu{
            float: right;
        }
        .add{
            clear: both;
            min-height: 50px;
           margin-bottom: 10px;
            margin-top:8px;
        }


        .add .con{
            font-size: 12px;text-align: left;
            display: block;
            width: 100%;
            float: left;
        }
        .record-baoxiu  .weidu{
            color: #38ADFF;
        }
        #record{
            margin-top:20px;
            min-height:160px;
            width: 90%;
            margin-left: 5%;
            box-shadow:1px 1px 10px rgba(253,135,67,0.22);
            -webkit-box-shadow: 1px 1px 10px rgba(253,135,67,0.22);
            -moz-box-shadow: 1px 1px 10px rgba(253,135,67,0.22);
            text-align: center;
        }
    </style>

</head>
<body>
<div class="top am-g">
    <div class=" am-u-sm-12 am-text-center">
        <a href="index.html">
        <img src="assets/i/zuo.png" width="8" ></a>
        <span class="center-title">报事报修</span>
    </div>
</div>
<div class="am-g center" style="margin-bottom: 30px;">
    <div class="am-u-sm-12 fangchan">
        <span>房产选择</span>
        <select name="add" id="homeselect">
            <!--<option value="">恒大城15栋1504号</option>-->
        </select>
    </div>
    <div style="clear:both;"></div>
    <div class="am-u-sm-12 info">
        <p>情况说明：</p>
        <textarea  id="text_content" value=""></textarea>
    </div>
    <div style="clear: both"></div>
    <div class="am-u-sm-12 btn">
        <span id="tijiao">提交</span>
    </div>
    <div style="clear:both;"></div>
    <p style="margin-left: 10%;margin-top: 10px;font-size: 16px;color: #FD8340;margin-bottom: 8px;">报修记录：</p>
    <div class="am-u-sm-12  " id="record" style="margin-top: 0;padding-top: 8px;">

        <!--<div class="record-baoxiu" style="border-bottom: 1px solid #dbdbdb;padding: 8px;font-size: 13px;">-->
        <!--<span class="fan-add" style="float: left;">-->
           <!--2018-12-8-->
        <!--</span>-->
            <!--<span class="duqu weidu" >已读</span>-->
            <!--<div class="add" style="" >-->
                <!--<span>湖里小区:</span>-->
                <!--<span class="con" style="">水管破损水管破损水管破损水管破损水管破损水管破损</span>-->
                <!--&lt;!&ndash;<span class="time">2017-10-28</span>&ndash;&gt;-->
            <!--</div>-->
        <!--</div>-->
    </div>
</div>

<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1" >
    <div class="am-modal-dialog" style="border-radius: 10px;">
        <div class="am-modal-hd">
            <a href="javascript: void(0)" class="" style="background: url('assets/i/down.png')no-repeat;height: 30px;width: 30px;display: block;
background-size: 15px;float: right" data-am-modal-close></a>
        </div>
        <div class="am-modal-bd" style="margin-top: 44px;font-size: 16px;color: #333;font-weight: bold" >
            请输入说明情况！
        </div>
    </div>
</div>

<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-2" >
    <div class="am-modal-dialog" style="border-radius: 10px;">
        <div class="am-modal-hd">
            <a href="javascript: void(0)" class="" style="background: url('assets/i/down.png')no-repeat;height: 30px;width: 30px;display: block;
background-size: 15px;float: right" data-am-modal-close></a>
        </div>
        <div class="am-modal-bd" style="margin-top: 44px;font-size: 16px;color: #333;font-weight: bold" >
            请输入房产信息！
        </div>
    </div>
</div>

<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-3" >
    <div class="am-modal-dialog" style="border-radius: 10px;">
        <div class="am-modal-hd">
            <a href="javascript: void(0)" class="" style="background: url('assets/i/down.png')no-repeat;height: 30px;width: 30px;display: block;
background-size: 15px;float: right" data-am-modal-close></a>
        </div>
        <div class="am-modal-bd" style="margin-top: 44px;font-size: 16px;color: #333;font-weight: bold" >
           您已成功提交信息！
        </div>
    </div>
</div>

</body>
<script src="assets/js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/global.js"></script>
<script>
    $(function(){

        initGlobalPage();
        var token = sessionStorage.access_token;
        $.ajax( {
            url:'/index/user/ajax_get_house_property',
            type:'post',
            dataType:'JSON',
            data:{
                token:token,
            },
            success:function(res) {
//                console.log(res);
                if (res.code == -1) {
                    initGlobalPage();
                    return;
                 }

                 if(res.code == 0){
                     againToken();
                     return;
                 }

                if(res.code == 3){
                    $('#doc-modal-2').modal('open');
                    $('#doc-modal-2').on('opened.modal.amui', function(){
                        sleep(1000);
                        window.history.back(-1);
                    });
                }
               // console.log(res.data);
                var data=res.data;
                if(res.code == 1){
                    var html="";
                    $(data).each(function(index,item){

                        // console.log(item);
                        html+=' <option id="'+item.id+'" value="'+item.id+'">'+item.detail;
                        html+='</option>';
                    })
                    $('#homeselect').append(html);
                }
            },
            error : function() {
                // view("异常！");
                alert("异常！");
            }
        });
        function sleep(numberMillis) {
            var now = new Date();
            var exitTime = now.getTime() + numberMillis;
            while (true) {
                now = new Date();
                if (now.getTime() > exitTime)
                    return;
            }
        }

        $('#tijiao').click(function(){

            var remark=$('#text_content').val();
            var id=$('#homeselect option:checked').val();
//            console.log(remark);
//            console.log(id);

            if(remark == ''){
                $('#doc-modal-1').modal('open');

            }
            $.ajax( {
                url:BASE_URL+'/index/repair/ajax_add_repair',
                type:'post',
                dataType:'JSON',
                data:{
                    token:token,
                    house_property_id:id,
                    remark:remark,
                },
                async:false,
                success:function(res) {
//                    console.log(res);
                    if (res.code == -1) {
                        initGlobalPage();
                        return;
                    };

                    if(res.code == 0){
                        againToken();
                        return;
                    }

                    if (res.code == 1) {
//                        layer.msg('成功提交信息！');
                        $('#doc-modal-3').modal('open');
                        $('#doc-modal-3').on('opened.modal.amui', function(){
                            sleep(1000);
                            window.location.href= 'index.html';
                            return;
                        });

                    };

                },
                error : function() {
                    // view("异常！");
                    alert("异常！");
                }
            });
        })
    })

    var token = '';  //token
    var page_number = 1;    //当前页数
    var allpage = 1;//总页数
    function getbaoxiuList() {


        var data = {
            token: sessionStorage.access_token,
            page_number: page_number,
            page_size: 2,
        };
        $.ajax({
            method: "post",
            data: data,
            url: "/index/repair/ajax_repair_list",
            async: false,
            success: function (result) {
//                console.log(result);
                if (result.code == -1) {
                    sessionStorage.clear();
                    initGlobalPage();
                    return;
                }
                if(result.code ==0){
                    againToken();
                    return;
                }
                var recordhtml = '';
                if (result.code == 1) {
                    allpage = result.data.page.totalpage;

                    var recordhtml = '';
                    var a = result.data;
                    console.log(a);
                    $.each(a.list,function (index,value) {
                         console.log(value);
                        var create_time = formatDate(value.create_time);
                         recordhtml+='<div class="record-baoxiu am-u-sm-12 am-padding-0" >';
                         recordhtml+=' <span class="time" >'+create_time;
                         recordhtml+='</span>';
                         if (value.status==0){
                             recordhtml+='<span class="duqu weidu" >'+"待处理";
                             recordhtml+='</span>';
                         }else if(value.status==1){
                             recordhtml+='<span class="duqu" >'+"处理中";
                             recordhtml+='</span>';
                         }else{
                             recordhtml+='<span class="duqu" >'+"已处理";
                             recordhtml+='</span>';
                         }

                        recordhtml+='<div class="add am-u-sm-12 am-padding-0" >';
                        recordhtml+='<span class="con" >'+value.remark+'</span>';

                        recordhtml+='</div>';
                        recordhtml+='</div>';
                        page_number++;
//                         console.log(recordhtml);
                    });

                    $("#record").append(recordhtml);
                }
            },
            error: function () {
                console.log("error");
            }
        });
    }
    function scrollFn() {
        //真实内容的高度
        var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
        //视窗的高度
        var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
        //隐藏的高度
        var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

        if (pageHeight - viewportHeight - scrollHeight < 20) {  //如果满足触发条件，执行
            if (page_number <= allpage) {
                getbaoxiuList();

            }
        }
    }

    $(function () {

        getbaoxiuList();
        $(window).bind("scroll", scrollFn);    //绑定滚动事件
    })
</script>
</html>